<template>
    <div class="container">
        <van-nav-bar fixed class="van-admin" >
           <template #left>
            <div class="header-left">
             <div @click="$router.back()" class="icon-admin">
               <van-icon style="margin-top:1.6vw" color="#fff" size="20" name="arrow-left" />
             </div>
             <div class="context">
              <span style="color:#333">{{list.name}}</span>
             </div>
            </div>
          </template>
          <template #right>
            <div class="header-right">
              <van-button style="width:14vw" @click="wantLock"  color="#999" round size="small" type="info">
                <!-- <template #default>
                  <div>
                    <span>发布</span>
                  </div>
                </template> -->
                发布
              </van-button>
            </div>
          </template>
        </van-nav-bar>
        <!-- 主体内容 -->
        <div class="remark">
            <span style="margin-right:4vw">评分</span>
            <van-rate
                v-model="newComment.rank"
                :size="25"
                color="#ffd21e"
                void-icon="star"
                void-color="#eee"
                allow-half
            />
            <span v-if="newComment.rank === 0.5">
                  <span class="start-remark">{{newComment.rank*2}}分</span>
            <span style="margin-left:3vw">超烂,太差了</span>
            </span>
             <span v-else-if="newComment.rank === 1">
                  <span class="start-remark">{{newComment.rank*2}}分</span>
            <span style="margin-left:3vw">超烂,太差了</span>
            </span>
             <span v-else-if="newComment.rank === 1.5">
                  <span class="start-remark">{{newComment.rank*2}}分</span>
            <span style="margin-left:3vw">踩雷,不推荐</span>
            </span>
              <span v-else-if="newComment.rank === 2">
                  <span class="start-remark">{{newComment.rank*2}}分</span>
            <span style="margin-left:3vw">踩雷,不推荐</span>
            </span>
              <span v-else-if="newComment.rank === 2.5">
                  <span class="start-remark">{{newComment.rank*2}}分</span>
            <span style="margin-left:3vw">凑合,一般般</span>
            </span>
              <span v-else-if="newComment.rank === 3">
                  <span class="start-remark">{{newComment.rank*2}}分</span>
            <span style="margin-left:3vw">凑合,一般般</span>
            </span>
            <span v-else-if="newComment.rank === 3.5">
                  <span class="start-remark">{{newComment.rank*2}}分</span>
            <span style="margin-left:3vw">不错,很值喔</span>
            </span>
              <span v-else-if="newComment.rank === 4">
                  <span class="start-remark">{{newComment.rank*2}}分</span>
            <span style="margin-left:3vw">不错,很值喔</span>
            </span>
               <span v-else-if="newComment.rank === 4.5">
                  <span class="start-remark">{{newComment.rank*2}}分</span>
            <span style="margin-left:3vw">推荐👍赞爆了</span>
            </span>
                <span v-else-if="newComment.rank === 5">
                  <span class="start-remark">{{newComment.rank*2}}分</span>
            <span style="margin-left:3vw">推荐👍赞爆了</span>
            </span>
        </div>
        <div class="comment">
            <van-cell-group>
                <van-field v-model="newComment.comment2" placeholder="填写标题更容易被推荐到首页~(选填)" />
            </van-cell-group>
             <van-cell-group>
                <van-field v-model="newComment.content"  rows="10" autosize  type="textarea"  placeholder="写出你的观影感受吧！" />
            </van-cell-group>
        </div>
    </div>
</template>

<script>
import { getDetailInfo } from '@/api/detail'
import { getMovieList, setInfoSearch } from '@/api/movielist'
export default {
  name: 'DetailPage',
  data () {
    return {
      list: [],
      start: null,
      newComment: {
        username: this.$store.state.user.userInfo.userId,
        address: this.$store.state.city,
        comment_time: '',
        content: '',
        comment2: '',
        rank: ''
      },
      historylist: []
    }
  },
  methods: {
    // 获取时间
    creatTime () {
      const now = new Date()
      const year = now.getFullYear()
      const month = (now.getMonth() + 1).toString().padStart(2, '0') // 月份从 0 开始，需加 1
      const day = now.getDate().toString().padStart(2, '0')
      const hours = now.getHours().toString().padStart(2, '0')
      const minutes = now.getMinutes().toString().padStart(2, '0')
      const seconds = now.getSeconds().toString().padStart(2, '0')
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
    },
    wantLock () {
      // 修改本地存储数据
      // 找到电影名匹配的电影对象
      const movieIndex = this.historylist.findIndex(item => item.name === this.querySearch)
      if (movieIndex !== -1) {
        // 如果找到了对应的电影，将新评论添加到该电影的 comment 数组中
        this.newComment.rank = this.newComment.rank * 2
        this.historylist[movieIndex].comment.unshift(this.newComment)
        setInfoSearch(this.historylist)
        this.$toast({
          message: '发布成功',
          type: 'success',
          duration: 900
        })
        this.$router.back()
      } else {
        this.$toast({
          message: '未知错误-评论'
        })
      }
    }
  },
  computed: {
    // 获取地址url的关键字
    querySearch () {
      return this.$route.query.MovieName
    }
  },
  created () {
    // 获取初始值
    this.newComment.comment_time = this.creatTime()
    this.historylist = getMovieList()
    const res = getDetailInfo(this.querySearch)
    console.log(res)
    this.list = res
  },
  mounted () {
    // 使页面滚动到顶部
    window.scrollTo(0, 0) // 滚动到页面顶部
  }
}
</script>

<style lang="less" scoped>
.fixed-header{
  position: fixed;
  z-index: 9999;
}
.center{
    margin: 0 auto;
    padding: 1vw 3vw;
    border-radius: 2vw;
    width: 91%;
    margin-top: 4vw;
    background-color: #f1f1f1;
    .introduce{
      font-size: 3.7vw;
      letter-spacing: 0.15vw;
      padding-bottom: 2vw;
    }
}
  .btn-admin-common{
    width: 22vw;
    font-size: 4vw;
    border-radius: 3vw;
    letter-spacing: 0.3vw;
  }
  .showDialog{
    // margin: ;
    width: 100%;
    height: 14vw;
     background: linear-gradient(to right, #ecb91f, #c774b8);
     span{
      padding: 0 5vw;
      display: inline-block;
      text-align: center;
      width: 100%;
      height: 10vw;
      line-height: 10vw;
     }
  }
.van-admin{
    // 渐变色
     background-image: linear-gradient(to top, rgba(223, 233, 39, 0.5) 0%, rgba(244, 216, 34, 0.5) 100%);
}
  .header-left{
  height: 8vw;
  // background-color: red;
  display: flex;
  text-align: left;
  .context{
    width: 60vw;
    height: 100%;
    margin-left: 15vw;
    letter-spacing: 0.3vw;
    margin-top: 1vw;
    font-size: 5vw;
    span{
      width: 100%;
    }
    .rate-scor{
      margin-left: 2vw;
      color: #ec3814;
      font-size: 2.8vw;
    }
  }
  }
  .header-right{
    width: 20vw;
    height: 8vw;
    .addBtn{
      background-color: red;
    }
  }
    .remark{
        margin-top: 15vw;
        padding: 3vw;
        .start-remark{
            height: 100%;
            margin-left:4vw;
            color:#f59506
        }
    }
</style>
